<template>
	<view class="container">
		<view class="bg">
			<view class="navtitle">
				<view class="left" @click="back"></view>
				<view class="title">
					订单详情
				</view>
			</view>
			<view class="zhifu">
				支付成功，请您前往指定门店消费
			</view>
			<view class="shopname">
				<uni-section class="mb-10" title="伟业汽车美容店(人民路店)" sub-title="山阳区人民中路33号"
					style="background-color: #3082fb;" titleColor="#dce7fc" subTitleColor="#dce7fc">
					<template v-slot:decoration>
						<view class="decoration">
							<image src="../../../static/user3/shop2.png" mode=""></image>
						</view>
					</template>
					<template v-slot:right>
						<view class="plane">
							<image src="../../../static/user3/plane.png" mode=""></image>
						</view>
					</template>
				</uni-section>
			</view>
		</view>
		<view class="card" style="margin-top: -70rpx;">
			<uni-card title="订单详情" style="border-radius: 26rpx;">
				<uni-section class="mb-10" title="车辆精洗">
					<template v-slot:right>
						￥39.90
					</template>
				</uni-section>
				<uni-section class="mb-10" title="车辆附加费用" style="margin-top: -30rpx; ">
					<template v-slot:right>
						0
					</template>
				</uni-section>
				<u-gap height="1" bgColor="#f0f0f0"></u-gap>
				<uni-section class="mb-10" title="原价">
					<template v-slot:right>
						￥59.90
					</template>
				</uni-section>
				<uni-section class="mb-10" title="店家优惠" style="margin-top: -30rpx; ">
					<template v-slot:right>
						<span style="color: #ff5d2c;">
							-￥20元
						</span>
					</template>
				</uni-section>
				<u-gap height="1" bgColor="#f0f0f0"></u-gap>
				<uni-section class="mb-10" title="优惠券">
					<template v-slot:right>
						<span style="color: #ff5d2c;">
							-￥10
						</span>
					</template>
				</uni-section>
				<u-gap height="2" bgColor="#f0f0f0"></u-gap>
				<uni-section class="mb-10" title="支付金额">
					<template v-slot:right>
						<span style="color: #35cc66;">
							￥29.9
						</span>
					</template>
				</uni-section>
			</uni-card>
		</view>
		<view style="border-top: 20rpx;">
			<uni-card title="订单信息" style="border-radius: 26rpx;">
				<uni-section class="mb-10" title="订单号:">
					<template v-slot:right>
						2420218240018
					</template>
				</uni-section>
				<uni-section class="mb-10" title="下单时间:" style="margin-top: -30rpx; ">
					<template v-slot:right>
						2023.03.13  &nbsp;&nbsp;17:40
					</template>
				</uni-section>
				<uni-section class="mb-10" title="预约时间:" style="margin-top: -30rpx; ">
					<template v-slot:right>
						2023.03.18  &nbsp;&nbsp;13:40
					</template>
				</uni-section>
				<uni-section class="mb-10" title="车辆:" style="margin-top: -30rpx; ">
					<template v-slot:right>
						奔驰FWE4/豫A89FHJ
					</template>
				</uni-section>
				<uni-section class="mb-10" title="备注:" style="margin-top: -30rpx; ">
					<template v-slot:right>
						暂无备注
					</template>
				</uni-section>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		height: 360rpx;
		background-color: #3082fb;
		overflow: hidden;
	}

	.navtitle {
		display: flex;
		margin-top: 40rpx;
		/* border: 1px solid red; */
		align-items: center;
	}

	.navtitle .left {
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
		border-left: 2px solid white;
		border-bottom: 2px solid white;
		transform: rotate(45deg);
	}

	.bg .title {
		color: #e0ebfd;
		font-size: 40rpx;
		margin-left: 260rpx;
		font-family: 'Times New Roman', Times, serif;
		font-weight: 600;
	}

	.decoration image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.plane image {
		width: 50rpx;
		height: 50rpx;
	}

	.zhifu {
		margin-left: 40rpx;
		margin-top: 30rpx;
		color: #dce7fc;
	}

	.card {
		margin-top: -60rpx;
	}
</style>